<template>
    <div style="width: 100%;">
        <TitleTips title="日常养护" />
        <el-form ref="form" :model="form" class="size-auto width-0" :rules="rules" :inline="true" size="medium" label-width="0">
            <el-row v-for="(item, index) in form['dailyList']" :key="item.uid" :gutter="24">
                <el-col :span="5">
                    <el-form-item label="" :prop="`dailyList.${index}.projectId`" :rules="rules.projectId">
                        <el-select
                            v-model="form.dailyList[index].projectId"
                            placeholder="选择项目"
                            style="width: 100%;"
                            @change="(val) => (handleChange(val, index))"
                        >
                            <el-option
                                v-for="option in projectOptions"
                                :key="option.id"
                                :label="option.label"
                                :value="option.id"
                            />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="4">
                    <el-form-item label="" :prop="`dailyList.${index}.budgetMoney`" :rules="rules.budgetMoney">
                        <el-input v-model.trim="form.dailyList[index].budgetMoney" disabled placeholder="预算金额">
                            <i slot="suffix" class="el-input__icon input-unit">元</i>
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="5">
                    <el-form-item label="">
                        <el-select
                            v-model="form.dailyList[index].jobArea"
                            :disabled="!form.dailyList[index].projectId"
                            placeholder="作业范围"
                            style="width: 100%;"
                        >
                            <el-option
                                v-for="option in jobAreaOptions[index]"
                                :key="option.jobArea"
                                :label="option.jobAreaName"
                                :value="option.jobArea"
                            />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="3">
                    <el-form-item label="" :prop="`dailyList.${index}.workAmount`" :rules="rules.workAmount">
                        <el-input v-model.trim="form.dailyList[index].workAmount" :disabled="!form.dailyList[index].projectId" placeholder="工程量" @change="(val) => (handleComputed(val, index))" />
                    </el-form-item>
                </el-col>
                <el-col :span="5">
                    <el-form-item label="">
                        <el-input v-model="form.dailyList[index].prepareCompletionMoney" disabled placeholder="计划完成金额">
                            <i slot="suffix" class="el-input__icon input-unit">元</i>
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="1" class="btn">
                    <i v-if="index === 0" class="el-icon-circle-plus-outline" @click="addCard" />
                    <i v-else class="el-icon-remove-outline" @click="handleDelete(index)" />
                </el-col>
            </el-row>
        </el-form>
    </div>
</template>

<script>
import reconfirm from '@/utils/reconfirm'
import { uniqueId } from 'lodash-es'
import BigNumber from 'bignumber.js'

export default {
    name: 'EverydayForm',
    props: {
        form: {
            type: Object,
            default: () => ({ dailyList: [{ uid: uniqueId() }] })
        },
        rules: {
            type: Object,
            default: () => ({})
        },
        projectOptions: {
            type: Array,
            default: () => ([{ jobAreaList: [] }])
        }
    },
    data() {
        return {
            cost: {},
            jobAreaOptions: []
        }
    },
    watch: {
        projectOptions() {
            this.initOptions()
        }
    },
    methods: {
        // 初始化作业范围下拉选项
        initOptions() {
            console.log(this.form.dailyList)
            this.form.dailyList.forEach((item, index) => {
                this.projectOptions.some(m => {
                    if (m.id === item.projectId) {
                        this.cost = m
                        return true
                    }
                })
                // 作业范围下拉选项
                this.jobAreaOptions[index] = this.cost.jobAreaList
                console.log(this.projectOptions)
            })
        },
        handleChange(val, index) {
            if (val) {
                this.projectOptions.some(item => {
                    if (item.id === val) {
                        this.cost = item
                        return true
                    }
                })
                const list = JSON.parse(JSON.stringify(this.form.dailyList))
                // 项目下拉变化时，作业范围先请空
                this.jobAreaOptions[index] = []
                list[index].jobArea = null
                // 变化时工程量和计划完成金额清空
                list[index]['workAmount'] = null
                list[index]['prepareCompletionMoney'] = null
                this.$emit('update:form', { dailyList: list })

                // 作业范围下拉选项
                this.jobAreaOptions[index] = this.cost.jobAreaList || []
                // 如果只有一个选项，默认选中
                if (this.jobAreaOptions[index].length === 1) {
                    list[index].jobArea = this.jobAreaOptions[index][0].jobArea
                }
                // 项目名称和费用名称传给后端
                list[index].projectName = this.cost.projectName
                list[index].costName = this.cost.costName
                // 修改预算金额
                list[index].budgetMoney = this.cost.budgetMoney
                this.$emit('update:form', { dailyList: list })
            }
        },
        // 针对新建年度养护计划做的计算金额
        handleComputed(val, index) {
            // 如果填的值不正经不作操作
            if (val && isNaN(Number(val))) { return }
            let value = null
            if (val) {
                value = new BigNumber(val).times(this.cost.unitPrice).toNumber()
            } else {
                value = null
            }
            const list = JSON.parse(JSON.stringify(this.form.dailyList))
            list[index]['prepareCompletionMoney'] = value
            // 后端需要unitPrice、arithmeticalUnit
            list[index]['unitPrice'] = this.cost.unitPrice
            list[index]['arithmeticalUnit'] = this.cost.arithmeticalUnit
            this.$emit('update:form', { dailyList: list })
        },
        // 前端删除赔付项目列表
        handleDelete(index) {
            reconfirm({
                isPromise: false,
                callback: () => (this.deleteCard(index))
            })
        },
        deleteCard(index) {
            const list = JSON.parse(JSON.stringify(this.form.dailyList))
            list.splice(index, 1)
            this.$emit('update:form', { dailyList: list })
        },
        // 前端新增赔付项目列表
        addCard() {
            const item = { budgetMoney: null, uid: uniqueId() }
            const list = JSON.parse(JSON.stringify(this.form.dailyList))
            list.push(item)
            this.$emit('update:form', { dailyList: list })
        },
        handleValidate() {
            return new Promise((resolve) => {
                this.$refs['form'].validate(valida => {
                    resolve(valida)
                })
            })
        }
    },
}
</script>

<style lang="scss" scoped>
.el-form--inline.size-auto.width-0 {
    ::v-deep {
        // form的label-width：72px 根据实际label宽度修改
        .el-form-item__content {
            width: 100%;
        }
    }    
}
.margin-b-0 {
    margin-bottom: 0;
}
.btn {
    height: 32px;
    line-height: 32px;
    min-width: 40px;
    cursor: pointer;
}
</style>
